<template>
  <div class="bgg">
    <div class="bgw">
      <div id="all">
        <div class="top">
          <div id="one">
            <van-icon name="thumb-circle" size="25px" color="#FFA500" />
            <b style="margin-left: 10px">{{ curClock.title }}</b>
          </div>
          <div id="two">
            <span>+{{ curClock.integral }}</span
            >积分
          </div>
        </div>
        <div>{{ curClock.content }}</div>
      </div>
      <p>上传照片</p>
      <div id="imgFile">
        <van-uploader v-model="fileList" :after-read="handleUpload" :max-count="1" />
      </div>
    </div>

    <div class="finally" @click="handleClick" v-if="curClock.status == 0">
      立 即 <br />
      打 卡
    </div>

    <div class="finallys" v-if="curClock.status == 1">已 打 卡</div>
  </div>
</template>

<script setup>
import { useIntegrallist } from '@/stores/integralList.js' // 导入 useIntegrallist 函数，用于获取积分列表的 store
import { storeToRefs } from 'pinia' // 导入 storeToRefs 函数，用于将 store 转换为响应式引用
import { closeToast, showLoadingToast, showToast } from 'vant' // 导入 vant 库中的提示组件函数
import { ref } from 'vue' // 导入 Vue 的 reactive 和 ref 函数，用于创建响应式数据
import { assignmentStart, upload } from '../api' // 导入自定义的 API 函数，用于打卡和上传图片操作
import router from '../router' // 导入自定义的 router 实例

const integrallist = useIntegrallist() // 使用 useIntegrallist 函数创建积分列表的 store 实例
const { curClock } = storeToRefs(integrallist) // 将 store 转换为响应式引用，并解构出 curClock 属性


const fileList = ref([]) // 创建一个 ref 对象，初始化为空数组

// 点击打卡按钮
async function handleClick() {
  try {
    await assignmentStart({
      id: curClock.value.id,
      user_id: 1,
      images: images.value
    })
    showToast({
      type: 'success',
      message: '恭喜您，打卡成功'
    })
    router.back() // 返回上一页
  } catch (error) {
    showToast({ type: 'error', message: '打卡失败，请查看原因再重新打卡' })
    // integrallist.getCurClock({ ...curClock.value, status: 1 })
  }
}

const images = ref('') // 创建一个 ref 对象，用于保存图片地址
// 图片上传
async function handleUpload({ file }) {
  showLoadingToast({
    message: '上传中...',
    forbidClick: true
  })
  const formData = new FormData()
  formData.append('file', file)
  try {
    const res = await upload(formData) // 调用 upload 函数进行图片上传操作
    if (res.data.code === 1) { // 判断上传结果是否成功
      images.value = res.data.data.url // 将图片地址赋值给 images
      closeToast() // 关闭加载中提示
      showToast('上传成功') // 显示上传成功的提示消息
    }
  } catch (error) {
    closeToast() // 关闭加载中提示
  }
}

</script>

<style lang="less" scoped>
@var1: #df9d0f;
@var2: #f5f6f8;
@var3: #9b8bff;
@var4: #6654ff;
@var5: #ffb800;

#one {
  display: flex;
  align-items: center;
  color: @var1;
  font-size: 16px;
  font-weight: 900;
}
.bgg {
  background-color: @var2;
  height: 92vh;
  position: relative;
}
.bgw {
  background-color: white;
}
.top {
  display: flex;
  justify-content: space-between;
  width: 96%;
  margin-left: 2%;
  padding: 1.5vh 0;
}
#all {
  background-color: @var3;
  width: 94%;
  margin-left: 3%;
  border-radius: 10px;
  margin-top: 2vh;
  & > div:last-child {
    margin-left: 40px;
    color: white;
    font-weight: 900;
    padding-bottom: 2vh;
    font-size: 15px;
  }
}
#two {
  color: @var4;
  font-weight: 600;
  font-size: 15px;
}
p {
  font-weight: 900;
  font-family: '微软雅黑';
  margin: 3vh 3%;
}
#imgFile {
  margin-left: 3%;
  padding-bottom: 2vh;
}
.finally,
.finallys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  background-color: @var5;
  background: -webkit-linear-gradient(top, #ffca00, #ff9e00);
  color: white;
  font-weight: 900;
  font-size: 17px;
  border-radius: 50%;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.finallys {
  filter: grayscale(80%);
}
</style>
